<template>
  <div class="Date">
  <div class="qf">
     <div class="ul-tp">
      <img :src="page1.designTemplateImageUrl" alt="">
     </div>
     <h2>{{page1.templateTitle}}</h2>
     <p class="p1">{{page1.kindTitle}}</p>
     <p class="p2">图片的编号为{{page1.designTemplateId}}该海报的尺寸为{{page1.width}}*{{page1.height}}.点击"立即使用"{{page1.templateTitle}}—键生成，在线编辑图片,简单托拉拽,秒出精美手机海报</p>
     <span class="p3">{{page1.keywords}}</span>
     <div class="recommendWrap">
      <h3>为你推荐</h3>
    <ul>
      <li v-for="(b,i) in page" :key="i">
         <router-link :to="{
          path:'/detailpage1/'+b.designTemplateId}">
        <img :src="b.designTemplateImageUrl" alt="">
         </router-link>
      </li>
    </ul>
  </div>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page:[],
      page1:[],
    }
  },
  methods: {
    getPage(){
      this.$ajax.get(
          `/bcd/designtemplate/getDetailCacheFileUrl.do?_dataType=json&_dataClientType=3&client_type=40&id=${this.id}&business_type=1,2,3`
        ).then((res) => {
           console.log(res);
           this.page = res.data.body.recommendedTemplates;
           this.page1 = res.data.body.currentTemplate;
           console.log(this.page);
           console.log(this.page1);
        });
    },
    // ipt(b){
    //   this.page="";
    //   this.page1="";
    //   this.b = b.designTemplateId;
    //   this.$ajax.get(
    //       `/bcd/designtemplate/getDetailCacheFileUrl.do?_dataType=json&_dataClientType=3&client_type=40&id=${this.id}&business_type=1,2,3`
    //     ).then((res) => {
    //        console.log(res);
    //        this.page = res.data.body.recommendedTemplates;
    //        this.page1 = res.data.body.currentTemplate;
    //        console.log(this.page);
    //        console.log(this.page1);
    //     });
    // }
  },
  created() {
    this.id = this.$route.params.id;
    this.getPage();
  },
}
</script>

<style scoped>
   .qf{
     width: 100%;
     background-color: #ffff;
     border-radius: 10px;
     margin: 8px 4px;
   }
   .ul-tp img{
     width: 65%;
     margin-top: 38px;
   }
   .p1{
     text-align: left;
     font-size: 14px;
     color: #999;
     margin-left: 22px;
   }
   .p2{
     text-align: left;
     color: #333;
     font-size: 14px;
     padding: 10px 21px;
   }
   .p3{
     text-align: left;
     margin-left: 22px;
   }
   h3{
     text-align: left;
     margin: 15px 0px 15px 22px;
   }
   .recommendWrap ul{
     list-style: none;
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
   }
   .recommendWrap ul li{
     width: 45%;
     margin-bottom: 15px;
   }
   .recommendWrap ul li img{
     width: 100%;
   }
</style>